<article class="component" id="typography">
  <h2 class="component-title">Types</h2>
  <p class="component-description">Basic text style.</p>

  <div class="component-example component-example-fullbleed">
    <div class="content-padded">
      <h1>Heading1</h1>
      <h2>Heading2</h2>
      <h3>Heading3</h3>
      <h4>Heading4</h4>
      <h5>Heading5</h5>
      <h6>Heading6</h6>
      <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
    </div>
  </div>

{% highlight html %}
<div class="content-padded">
  <h1>Heading1</h1>
  <h2>Heading2</h2>
  <h3>Heading3</h3>
  <h4>Heading4</h4>
  <h5>Heading5</h5>
  <h6>Heading6</h6>
  <p>This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.</p>
</div>
{% endhighlight %}
</article>
<article class="component" data-url="type">
    <h2>Text and Background Color</h2>

    <p>There are some util class to set text color and background color:</p>

{% highlight html %}
<ul>
  <li class='color-primary'>color primary</li>
  <li class='color-success'>color success</li>
  <li class='color-warning'>color warning</li>
  <li class='color-danger'>color danger</li>
</ul>

<ul>
  <li class='bg-primary'>bg primary</li>
  <li class='bg-success'>bg success</li>
  <li class='bg-warning'>bg warning</li>
  <li class='bg-danger'>bg danger</li>
</ul>
{% endhighlight %}

  </article>


